<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>XPEL 质保后台管理登录</title>
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <link rel="stylesheet" href="/dist/font-awesome.css">
    <link rel="stylesheet" href="/dist/bootstrap.css">
    <link rel="stylesheet" href="/dist/toastr.min.css">
    <style>
        body{
            background-color: #364150;
            font-size: 13px;
            color: #333;
        }
        .login{
            background-color: #364150;
            min-height: 100vh;
            width: 100vw;
            display: flex;
            flex-wrap: nowrap;
            justify-content: center;
            align-items: center;
        }
        .wrapper{
            background-color: #eceef1;
            width: 400px;
            max-width: 100%;
            padding: 30px;
            -webkit-border-radius: 7px;
            -moz-border-radius: 7px;
            border-radius: 7px;
            position: relative;
        }
        .form-title{
            color: #4db3a5;
            text-align: center;
            font-size: 28px;
            font-weight: 400;
            margin-bottom: 25px;
        }
        .forget-password{
            font-size: 14px;
            float: right;
            display: inline-block;
            margin-top: 10px;
        }
        a{
            color: #5b9bd1;
        }
        a:hover {
            color: #3175af;
        }
        .login .wrapper .form-control{
            background-color: #dde3ec;
            height: 43px;
            color: #8290a3;
        }
        .login .wrapper .form-control:focus, .login .wrapper .form-control:active{
            border: 1px solid #c3ccda;
            box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
            -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
        }
        .btn-success:active:hover, .btn-success.active:hover{
            background-color: #37918b;
        }
        .btn-success:active, .btn-success.active{
            background-image: none;
            background-color: #348a84;
        }
        .btn-success:hover, .btn-success:focus, .btn-success:active, .btn-success.active{
            color: #fff;
            background-color: #3b9c96;
            border-color: #307f7a;
        }
        .btn-success{
            color: #fff;
            background-color: #45B6AF;
            border-color: #3ea49d;
            font-weight: 600;
            padding-left: 20px;
            padding-right: 20px;
        }
        .btn-default{
            font-weight: 600;
            padding-left: 25px;
            padding-right: 25px;
            color: #6c7a8d;
            background-color: #ffffff;
            border: none;
        }
    </style>
</head>
<body>
<div class="login">
    <div class="wrapper">
        <form action="" method="post" class="login-form">
            @csrf
            <h3 class="form-title">Sign In</h3>
            <div class="form-group">
                <input class="form-control form-control-solid placeholder-no-fix" type="text" autocomplete="off" placeholder="Email/Unique ID" name="username" required value="{{ old('username') }}">
            </div>
            <div class="form-group">
                <input class="form-control form-control-solid placeholder-no-fix" type="password" autocomplete="off" placeholder="Password" name="password" required value="{{ old('password') }}">

                <input type="hidden" value="" name="type">
            </div>
            <div class="form-actions">
                <button type="submit" class="btn btn-success uppercase">Login</button>
                <a href="javascript:;" id="forget-password" class="forget-password">Forgot Password?</a>
            </div>
        </form>

        <form class="forget-form" action="/admin/forget_password" method="post" novalidate="novalidate" style="display: none;">
            <h3 class="form-title">Forget Password ?</h3>
            <p>
                Enter your e-mail address below to reset your password.
            </p>
            <div class="form-group">
                <input class="form-control placeholder-no-fix" type="text" autocomplete="off" placeholder="Email" name="email">
            </div>
            <div class="form-actions">
                <button type="button" id="back-btn" class="btn btn-default">Back</button>
                <button type="submit" class="btn btn-success uppercase pull-right">Submit</button>
            </div>
        </form>
    </div>
</div>

<script src="/dist/jquery.js"></script>
<script src="/dist/toastr.min.js"></script>
<script>
    $('#forget-password').click(function () {
        $('.login-form').hide();
        $('.forget-form').show();
    });

    $('#back-btn').click(function () {
        $('.login-form').show();
        $('.forget-form').hide();
    });
    @if(session('trash'))
    $(function () {
        toastr.{{ session('trash.type') ?: 'success' }}('{{ session('trash.content') ?: session('trash') }}', null, []);
    });
    @endif
</script>
</body>
</html>